<template>
	
<view class="">

	<min-swiper></min-swiper>
	<!-- end -->

   <!-- 内容 -->
   <view class="margin-right-sm margin-left-sm">
	   
	<view class='contianer shadow-warp bg-white' v-for="(item,index) in lists" :key="index">
	<view class='contianer-title'>
	<view class='contianer-title_image'  @tap="toUserMain(item.user_id)"> 
		<image :src='item.icon'></image>
	</view>
	<view class='contianer-name'>{{item.user_name}}</view>
	</view>

	<view class='contianer-content'>
		<text>{{item.content}}</text>
	</view>

	<view class='container-grid'>
	<view @tap='previewImg(i,item.imgs)' :data-index='i' :class=" i == 2 || i == 5 || i == 8  ? '' : item.imgs.length == 4 ?'' : item.imgs.length == 1 ? 'container-grid_image-1':'container-grid_image' "  :style="item.imgs.length == 4 ? 'width:32%;margin-right: 15rpx;' : '' " v-for="(it,i) in item.imgs" :key="i">
	<image :src='it' :style="item.imgs.length == 1 ? 'width:100%;' :'' " :class="item.imgs.length == 1 ? 'container-grid_img' : 'container-grid__image' " ></image>
	<!-- width:100%; -->
	</view>
	</view>
	<view class='contianer-content'>
		<text>{{item.time}}</text>
	</view>

	<view class='container-comment '>
	<view @tap='toDiscover_desc(item.post_id,item.user_id)'><text class='cuIcon-message lg text-black'>{{item.comment_count}}</text></view>
	<view><text class='cuIcon-appreciatefill lg text-red' @tap="praise(index,item.post_id)"></text><text> {{item.praise_count}}</text></view>
	</view>

	</view>

	</view>

	  <button type="default" class="publish-post" @tap="toPublishPost">+</button>
</view>



</template>

<script>
	import TopBar from "../component/topTab.vue";
	import minSwiper from "../component/minSwiper.vue";
	import datas from '../../datas/data.json'
	import store from '../../globalStore/store.json'
	export default {
		data() {
			return {
				  // end 
				  loading:false,
				  // 导航条
				    TabCur: 0,
				    scrollLeft: 0,
				  // 导航条end
				  lists:[],
				  cur_classify:"",
				  search_txt:"",
				  //导航条
				  tablist:[],
				  page:1
				  //end
			}
		},
		components:{ 
			TopBar,
			minSwiper
		},
		onLoad:function(){
			
			//this.lists=posts.posts;
			
			this.tablist=datas.labels.post_types;
		},
		onShow:function(){
			//this.tabSelect(0);
			uni.setNavigationBarTitle({
				title:"星球"
			})
			uni.setTabBarBadge({
			  index: 3,
			  text: store.chats_count.toString()
			})
			this.getPosts(parseInt(this.page),10);
			//导航条的高度
			// this.SelectorQuery()
		},
		
		//下拉刷新
		onPullDownRefresh:function() {
			//模拟加载完成
			this.page=1;
			this.lists=[];
			this.getPosts(parseInt(this.page),10);
			setTimeout(function () {
			    uni.stopPullDownRefresh();
			}, 2000);
			
		},
		//上拉刷新
		onReachBottom:function(){
			this.page++;
			uni.showLoading();

			setTimeout(function () {
				uni.hideLoading();
			}, 2000);
			this.getPosts(parseInt(this.page),10);
			
		},
		methods: {
			toPublishPost(){
				uni.navigateTo({
					url:"publish-post/publish-post"
				})
			},
			 toUserMain(id){
				 uni.navigateTo({
				 	url:'../user-detail/user-detail?user_id='+id
				 })
			 },
			 getMore(){
				 this.page++;
				this.getPosts(parseInt(this.page),10);
			 },
			// 点击图片打开详细
			  previewImg: function (index,imgs) {
			    // console.log(e.currentTarget.dataset.index);
			    //var index = e.currentTarget.dataset.index;
			    // var imgArr = this.imgArr;
			    uni.previewImage({
			      current: imgs[index],     //当前图片地址
			      urls: imgs,               //所有要预览的图片的地址集合 数组形式
			      success: function (res) { },
			      fail: function (res) { },
			      complete: function (res) { },
			    })
			  },
			  toDiscover_desc:function(post_id,user_id){
				  console.log(post_id,user_id);

				  uni.navigateTo({
				  	url:"/pages/disconver/discover_desc/discover_desc?post_id="+post_id
				  })
			  },
			  // 导航条点击
			    tabSelect(index) {
					// console.log(e)
					// let index = 0
					// if(e!==-1){
					// 	index=e.currentTarget.dataset.id
					// }
					
					this.TabCur = index;
					this.lists=[];
					let labels=this.tablist
					let label=labels[index].name;
					this.cur_classify=label;
					this.getPosts(label,parseInt(this.page),10);
					// let ps=datas.posts;
					// for(let i=0; i<ps.length; i++){
					// 	if(ps[i].classify==label){
					// 		this.lists.push(ps[i]);
					// 	}
					// }
			    
			      
			    },
				getPosts(page, page_size){
					var that=this;
					uniCloud.callFunction({
						name:"getPosts",
						data:{
							"page":page,
							"page_size":page_size
						},
						success(res) {
							
							let l=res.result.lists;
							for(let i=0; i<l.length; i++){
								for(let j=0; j<l[i].imgs.length; j++){
									l[i].imgs[j]="https://7463-tcb-ifefi2k5rw3qd7x53f623-663bf2-1303864694.tcb.qcloud.la/"+l[i].imgs[j];
								}
							}
							if(l.length!=0){
								that.lists=that.lists.concat(l);
							}

						}
					})
					// let tmp_lists=datas.posts;
					// console.log(tmp_lists[index]);
				},
				praise(index,id){
					this.lists[index].praise_count++;
					uniCloud.callFunction({
						name:"praise",
						data:{"post_id":id},
						success(res){
							
						}
					})
					// for(let i=0; i<datas.posts.length; i++){
					// 	if(datas.posts[i].post_id==id){
					// 		datas.posts[i].praise_count++;
					// 		break;
					// 	}
					// }
				},
				search(){
					uni.navigateTo({
						url:"search-content/search-content"
					})
				}

			}
			
	}
</script>

<style>
	/* 导航栏 */
	.publish-post{
		width: 50px;
		height: 50px;
		background: #34ca20  !important;
		position: fixed;
		color: #FFFFFF !important;
		left: 80%;
		bottom: 20%;
	}
	.get-more{
		margin-top: 8%;
		width: 80%;
	}
	.nav-item{
	  position: fixed;
	  width: 100%;
	  /* height: 200rpx; */
	  top: 1;
	  z-index: 2;
	}
	/* end */
	
	/* 内容 */
	.contianer{
	  height: auto;
	  width: 100%;
	  padding: 20rpx;
	  border-radius: 20rpx;
	  margin-bottom: 20rpx;
	  margin-top: 20rpx;
	}
	.contianer-title{
	  display: flex;
	  align-items: center;
	}
	.contianer-title_image image{
	  height: 50rpx;
	  width: 50rpx;
	  border-radius: 100%;
	}
	.contianer-name{
	  margin-left: 20rpx;
	  font-size: 25rpx;
	  color: black;
	}
	.contianer-content{
	  margin-top: 10rpx;
	  width: 100%;
	  display: -webkit-box;
	  overflow: hidden;
	  -webkit-line-clamp: 6;
	  -webkit-box-orient: vertical;
	}
	.contianer-content text{
	  font-size: 30rpx;
	  color: black;
	}
	.container-grid{
	  display: flex;
	  flex-wrap: wrap;
	  margin-top: 20rpx;
	  width: 100%;
	}
	.container-grid__image{
	  height: 210rpx;
	  width: 215rpx;
	  border-radius: 10rpx;
	}
	.container-grid_img{
	  width: 223rpx;
	  border-radius: 10rpx; 
	}
	.container-grid_image{
	  margin-right: 10rpx;
	  width: 32%;
	}
	.container-grid_image-1{
	   margin-right: 10rpx;
	  width: 100%;
	}
	.container-evaluate{
	  margin-top: 20rpx;
	  width: 100%;
	  height: auto;
	  border-radius: 20rpx;
	  padding: 20rpx;
	}
	.container-evaluate-top_1 image{
	  width: 75rpx;
	  height: 40rpx;
	}
	.container-evaluate-top{
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	.container-evaluate-desc{
	  width: 100%;
	  display: -webkit-box;
	  overflow: hidden;
	  -webkit-line-clamp: 2;
	  -webkit-box-orient: vertical;
	
	}
	.container-comment{
	  margin-top: 20rpx;
	}
	.container-comment{
	  padding: 20rpx;
	  display: flex;
	  justify-content: space-between;
	}
	/* end */
	
	
	
	
	/* 线 */
	.line{
	  display: flex;
	  height: 90rpx;
	}
	/* end */
	
	
	/* 轮播图 */
	.place {
	  width: 100%;
	  height: auto;
	  padding-top: 0rpx;
	    margin-bottom: 20rpx;
	}
	.swiper {
	  width: 100%;
	  margin-top: 10rpx;
	  display: -webkit-box;
	  display: -webkit-flex;
	  display: -ms-flexbox;
	  display: flex;
	  -webkit-box-pack: center;
	  -webkit-justify-content: center;
	      -ms-flex-pack: center;
	          justify-content: center;
	}
	.swiper .swiper-box {
	    width: 95%;
	    height: 30.7vw;
	    overflow: hidden;
	    -webkit-border-radius: 15rpx;
	            border-radius: 15rpx;
	    -webkit-box-shadow: 0rpx 8rpx 25rpx rgba(0, 0, 0, 0.2);
	            box-shadow: 0rpx 8rpx 25rpx rgba(0, 0, 0, 0.2);
	    position: relative;
	    z-index: 1;
	}
	.swiper .swiper-box swiper {
	      width: 100%;
	      height: 30.7vw;
	}
	.swiper .swiper-box swiper swiper-item image {
	        width: 100%;
	        height: 30.7vw;
	}
	.swiper .swiper-box .indicator {
	
	      position: absolute;
	      bottom: 20rpx;
	      left: 20rpx;
	      background-color: rgba(255, 255, 255, 0.4);
	      width: 150rpx;
	      height: 5rpx;
	      -webkit-border-radius: 3rpx;
	              border-radius: 3rpx;
	      overflow: hidden;
	      display: -webkit-box;
	      display: -webkit-flex;
	      display: -ms-flexbox;
	      display: flex;
	}
	.swiper .swiper-box .indicator .dots {
	        width: 100%;
	}
	.swiper .swiper-box .indicator .dots.on {
	          background-color: white;
	}
	/* 轮播图 */
	
	/* 线条 */
	.line{
	  display:flex;
	  height: 40rpx;
	  width: 100%;
	  /* border: 1rpx solid black; */
	}
	
	/* 线条end */
	
	/* 发帖 */
	.postMsg image{
	height: 100rpx;
	width: 100rpx;
	border-radius: 100%;
	position: fixed;
	bottom: 150rpx;
	right: 60rpx;
	z-index: 999;
	}
	/* end */
	
	/* 发布贴{添加居中线} */
	.drawerLine{
	 display: flex;
	 height: 310rpx; 
	}
	.cu-form-group textarea {
		margin: 32rpx 0 30rpx;
		height: 10.6em;
		width: 100%;
		line-height: 1.2em;
		flex: 1;
		font-size: 28rpx;
		padding: 0;
	}
	.confirm-bottom{
	  width: 100%;
	  height: 90rpx;
	}
	.NumChange{
	  padding-top: 50rpx;
	}
	.text-more text{
	  /* direction: rtl; */
	  text-align: right;
	  width: 95%;
	  font-size: 25rpx;
	}
	/* end */
	
	
	/* 页脚 */
	.foot{
	  display: flex;
	  padding: 10rpx;
	  align-items: center;
	  justify-content:space-between;
	}
	.foot-1{
	  width: 35%;
	  height: 1rpx;
	  background: gainsboro;
	}
	/* end */
	.label{
		background: #fffd43;
		color: black;
	}

	.search{
		margin-top: 5%;
		margin-bottom: 3%;
		margin-left: 5%;
		display: flex;
		
	}
	.search button{
		margin: 0;
		width: 64px;
		height: 37px;
		font-size: 15px;
		border-radius: 0px 0px;
		background: #4CD964;
		color: #FFFFFF;
	}
	.search input{
		padding: 1%;
		background: rgba(255, 255, 255, 1);
		width: 76%;
		height: 37px;
		color: black;
	}

</style>
